<template>
  <div>
    <Modal
      v-model="showModal"
      title="已有商品价格组"
      fullscreen
      @on-ok="linkGetInfoData"
    >
      <div style="position: absolute; top: 57px; right: 30px; z-index: 9">
        <!-- <Button v-if="tabsValue == 'linkno' ? true : false" type="info" ghost @click="batchSpuSelect('1')">批量关联</Button>
				<Button v-else type="info" ghost @click="batchSpuSelect('2')">批量取消</Button> -->
      </div>
      <Tabs v-model="tabsValue" @on-click="Chang" style="margin: 10px">
        <TabPane label="未关联" name="linkno">
          <Table
            max-height="430"
            :loading="goodsLoading1"
            :columns="column"
            :data="linkNoData"
            @on-selection-change="linkSelect"
          >
            <template slot-scope="{ row, index }" slot="action">
              <Button
                type="success"
                size="small"
                @click="selectProduct(row, index)"
                >关联</Button
              >
            </template>
          </Table>
        </TabPane>
        <TabPane label="已关联" name="linkyes">
          <Table
            max-height="430"
            :loading="goodsLoading2"
            :columns="column"
            :data="linkYesData"
            @on-selection-change="nolinkSelect"
          >
            <template slot-scope="{ row, index }" slot="action">
              <Button size="small" @click="selectSupply(row, index)"
                >取消</Button
              >
            </template>
          </Table>
        </TabPane>
      </Tabs>
      <div style="display: flex; justify-content: center">
        <Page
          :total="totalPage"
          show-sizer
          show-elevator
          show-total
          @on-change="pagechange"
          @on-page-size-change="pagesizechange"
        />
      </div>
    </Modal>
  </div>
</template>
<script>
import { ApiRequest } from '@api/basePage';
export default {
  components: {},
  props: {
    show: false,
    column: {
      type: Array,
      default: []
    },
    productUuid: ''
  },
  data () {
    return {
      onSearchClassifyModal: false, // 分类的modal
      searchdata: {
        categoryName: '',
        categoryUuid: '',
        templateName: '',
        templateUuid: '',
        spuNo: '',
        productNameFinal: ''
      },
      showModal: false,
      tabsValue: 'linkno',
      goodsLoading1: false,
      goodsLoading2: false,
      linkNoData: [],
      linkYesData: [],
      selectUnLinkList: [],
      selectLinkList: [],
      templateNameData: [], // 模糊搜索存放数据
      templateNamesData: [], // 模糊搜索存放数据
      nowPage: 1,
      pageShow: 10,
      totalPage: 0,
      saleuuid: [],
      classifyGrid: {
        xl: 6,
        lg: 6,
        md: 6,
        sm: 24,
        xs: 24
      },
      categoryUuid: '',
      searchData: [],
      isShowResults: false,
      allPathName: '', // 分类全路径名称
      catograyLevel: '0', // 分类级别
      menuData1: [], // 一级分类菜单
      menuData2: [], // 二级分类菜单
      menuData3: [], // 三级分类菜单
      menuData4: [], // 四级分类菜单
      lastLevel: false,
      apiObj: {
        // 查询未关联商品列表
        getProductList: {
          url: '/sysback/productspusearch/getSpuList', // 接口地址
          type: 'post' // 接口请求类型
        },
        // 批量查询基本信息
        queryAllManaging: {
          url: '/sysback/salepricesku/createByProductUuid', // 接口地址
          type: 'post' // 接口请求类型
        }
      }
    };
  },
  watch: {
    show (n, o) {
      this.showModal = n;
    },
    showModal (n, o) {
      if (n == false) {
        this.$emit('Close', false);
      }
    }
  },
  created () {
    this.getLinkData();
  },
  mounted () {},
  methods: {
    // 点击查询 清空
    TopButton (t) {
      if (t == 'reset') {
        this.searchdata.categoryName = '';
        this.searchdata.categoryUuid = '';
        this.searchdata.spuNo = '';
        this.searchdata.productNameFinal = '';
      }
      // 查询
      this.getLinkData();
    },
    // 切换 关联与未关联
    Chang (a) {
      this.nowPage = 1;
      this.pageShow = 10;
      this.getLinkData();
    },
    // 未关联列表多选
    linkSelect (arr) {
      this.selectUnLinkList = arr;
    },
    // 已关联列表多选
    nolinkSelect (arr) {
      this.selectLinkList = arr;
    },
    // 关联
    selectProduct (row, index) {
      this.saleuuid = [];
      this.linkYesData = [];
      this.saleuuid.push(row.uuid);
      this.linkNoData.splice(index, 1);
      this.$Message.success('关联成功');
    },
    // 取消关联
    selectSupply (row, index) {
      var that = this;
      that.linkYesData = [];
      that.saleuuid = [];
      that.$Message.success('取消成功');
    },
    // 批量操作
    batchSpuSelect (num) {
      var that = this;
      if (num == '1') {
        that.saleuuid = [];
        that.selectUnLinkList.forEach(function (item, index) {
          that.saleuuid.push(item.uuid);
        });
      } else {
        that.selectLinkList.forEach(function (item, index) {
          that.saleuuid.forEach(function (em, ei) {
            if (item.uuid == em) {
              that.saleuuid.splice(ei, 1);
            }
          });
        });
      }
      this.getLinkData();
    },
    // 点击关联弹窗 确定
    linkGetInfoData () {
      if (this.saleuuid.length === 0) {
        this.$Message.error('请选择要处理的数据');
        return;
      }
      let data = {
        fromProductUuid: this.saleuuid.join(','),
        sourceProductUuid: this.productUuid
      };
      ApiRequest(
        this.apiObj.queryAllManaging.url,
        this.apiObj.queryAllManaging.type,
        data,
        true
      ).then(res => {
        if (res.retStatus === '1') {
          this.$emit('returnList', res.retData);
        }
      });
    },
    pagechange (e) {
      this.nowPage = e;
      this.getLinkData();
    },
    pagesizechange (e) {
      this.pageShow = e;
      this.getLinkData();
    },

    // 获取关联商品列表
    getLinkData () {
      var that = this;
      let uuids = that.saleuuid.join(',');
      let param = [];
      if (that.tabsValue == 'linkno') {
        this.goodsLoading1 = true;
        param.push({
          name: 'uuid',
          value: uuids
        });
        param.push({
          name: 'uuid_q',
          value: 'NotIN'
        });
      } else {
        this.goodsLoading2 = true;
        param.push({
          name: 'uuid',
          value: uuids
        });
        param.push({
          name: 'uuid_q',
          value: 'IN'
        });
      }
      let data = {
        sortName: '',
        sortType: '',
        searchParam: JSON.stringify(param),
        nowPage: that.nowPage,
        pageShow: that.pageShow
      };
      if (uuids == '' && that.tabsValue == 'linkyes') {
        this.goodsLoading2 = false;
        this.linkYesData = [];
        return;
      }
      ApiRequest(
        this.apiObj.getProductList.url,
        this.apiObj.getProductList.type,
        data,
        false
      ).then(res => {
        if (res.retStatus == '1' && res.retData.results != null) {
          this.totalPage = res.retData.totalNum;
          if (that.tabsValue == 'linkno') {
            this.linkNoData = res.retData.results;
          } else {
            this.linkYesData = res.retData.results;
          }
        } else {
          this.linkNoData = [];
          this.linkYesData = [];
        }
        this.goodsLoading1 = false;
        this.goodsLoading2 = false;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.div {
  display: flex;

  > span:nth-of-type(2),
  > span:nth-of-type(3) {
    margin-left: 20px;
  }
}

.a {
  background: #5d8ae3 !important;

  > div {
    border-left: 40px solid #5d8ae3 !important;
  }
}

.b {
  background: #5d8ae3 !important;

  > div:nth-of-type(1) {
    border-left: 40px solid #5d8ae3 !important;
  }

  > div:nth-of-type(2) {
    position: absolute;
    top: 0px;
    left: -20px;
    border-top: 20px solid #5d8ae3 !important;
    border-right: 0px solid #5d8ae3 !important;
    border-bottom: 20px solid #5d8ae3 !important;
  }
}

.release {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #fbfafa;
  text-indent: 10px;
  margin-top: 16px;
}

.btn {
  width: 120px;
  margin: 16px 20px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 15px;
  border-radius: 4px;
  background: #5d8ae3;
}

.qw-classify {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #eeeeee;

  & /deep/ .ivu-menu {
    z-index: 10;

    &.ivu-menu-vertical.ivu-menu-light:after {
      display: none;
    }

    &.ivu-menu-light.ivu-menu-vertical
      .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      display: none;
    }

    & > .ivu-menu-item {
      padding: 10px 24px 10px 14px;

      .ivu-icon {
        position: absolute;
        right: 6px;
        top: 14px;
        display: none;
      }
    }

    .ivu-menu-item-active,
    .ivu-menu-item:hover {
      .ivu-icon {
        display: inline-block;
      }
    }
  }
}

.qw-reselect {
  margin-left: 20px;
  color: #95c85a;
  cursor: pointer;
}

.qw-searchresult {
  margin-top: 24px;
  border: 1px solid #eee;

  .qw-search-title {
    display: flex;
    background: #fbfafa;
    justify-items: center;
    align-items: center;
    padding: 0 0 0 10px;

    .title {
      flex: 1;
    }
  }

  .qw-searchno {
    padding: 16px;
  }

  & /deep/ .qw-search-body {
    .ivu-radio-group {
      display: block;

      .ivu-radio-group-item:not(last-child) {
        padding: 0 16px;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #eee;
      }

      .ivu-radio-group-item:hover {
        background-color: #f0f7ff;
      }
    }
  }
}

.search {
  width: 100%;
  padding: 10px 64px;
  background: #eaf7f9;
}
</style>